<template>
    <Row>
        <Col span="4">
            <div class="sidebar">
                <div class="menu-bar">
                    <h3><router-link :to="{name:'module_article_list', params:{name:tree.name,p_type:'*'}}">专项资讯</router-link></h3>
                </div>
                <div class="menu">
                    <Menu active-name="1" width="auto" @on-select="handleSelect">
                        <MenuItem v-for="item in tree.children" :name="item.name"><Icon type="stats-bars"></Icon>{{item.name}}</MenuItem>
                    </Menu>
                </div>
            </div>
        </Col>
        <Col offset="2" span="18"><AliveRouterView></AliveRouterView></Col>
    </Row>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    computed: {
        tree() {
            var usual_service = this.$store.state.app.dicTree.usual_service.children;
            for(var i = 0; i < usual_service.length; i++) {
                if(usual_service[i].name == this.$route.params.name) return usual_service[i];
            }
            return {};
        }
    },
    methods: {
        handleSelect(name) {
            this.$router.push({ name:'module_article_list', params:{ name: this.tree.name, p_type: name }});
        }
    },
    created(){
    }
};

</script>
<style scoped>
.sidebar{
    position: relative;
    top: -50px;
}
.sidebar .menu-bar{
    width: 120%;
    height: 60px;
    background-color: #143f87;

}
.sidebar .menu{
    width: 120%;
    border-left:10px solid #143f87;
}
.sidebar .menu-bar h3{
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    width:100%;
}
.sidebar .menu-bar h3 a {
        color: white;
}

</style>